<template>
  <view class="clientele">
    <navbar />
    <view v-for="(item,index) in clientList" :key="index" class="clientele-item" @click="ClickDetails(item)">
      <view class="left-img">
        <u--image :show-loading="true" :src="item.avatar" width="90px" height="95px" />
      </view>
      <view class="right-msg">
        <view class="right-name">
          <view class="right-left">姓&emsp;&emsp;名：</view>
          <view class="right-message">{{ item.name }}</view>
        </view>
        <view class="right-name">
          <view class="right-left">性&emsp;&emsp;别：</view>
          <view v-if="item.sex == '1'" class="right-message">男</view>
          <view v-else-if="item.sex == '2'" class="right-message">女</view>
        </view>
        <view class="right-name">
          <view class="right-left">年&emsp;&emsp;龄：</view>
          <view class="right-message">{{ item.age }}</view>
        </view>
        <view class="right-name">
          <view class="right-left">电&emsp;&emsp;话：</view>
          <view class="right-message">{{ item.phone }}</view>
        </view>
        <!-- <view class="right-name">
					<view class="right-left">工作地点：</view>
					<view class="right-message">{{item.location}}</view>
				</view> -->
      </view>
    </view>
    <u-button class="add-button" type="primary" icon="plus" @click="addition" />
  </view>
</template>

<script>
import { $_getClientList } from '@/api/clientele/clientele.js'
export default {
  data() {
    return {
      clientList: []
    }
  },
  onLoad() {
    this.getClient()
  },
  methods: {
    async getClient() {
      const res = await $_getClientList({
        page: 1,
        limit: 99
      })
      console.log(res)
      this.clientList = res.data.data
    },
    // 添加
    addition() {
      uni.navigateTo({
        url: '/pages/clientele/clienteleFrom'
      })
    },
    // 跳转详情
    ClickDetails(item) {
      console.log(item)
      uni.navigateTo({
        url: `/pages/clientele/clienteleDetails?hid=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .clientele {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .clientele-item {
      padding: 10px 10px 10px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f6f7;
      display: flex;
      height: 130px;
      width: 100%;

      .left-img {
        margin-right: 15px;
      }

      .right-msg {
        flex: 1;

        .right-name {
          display: flex;
          font-size: 15px;
          margin-bottom: 4px;

          /*溢出显示省略号*/
          .right-left {
            width: 75px;
            height: 22px;
          }

          .right-message {
            width: 345rpx;
            /* 文字进行不换行 */
            white-space: nowrap;
            /* 对于溢出的代码进行隐藏 */
            overflow: hidden;
            /* 剪裁后面的代码，并更改为省略号 */
            text-overflow: ellipsis;
          }
        }
      }
    }

  }
</style>